<template>
	<el-dialog title="日志详情" :visible.sync="visible" append-to-body width="800px">
		<el-row class="system_log_detail">
			<el-col :span="12">
				<dl>
					<dt>模块名称：</dt>
					<dd>{{ data.moduleName }}</dd>
				</dl>
			</el-col>
			<el-col :span="12">
				<dl>
					<dt>请求地址：</dt>
					<dd>{{ data.actionUrl }}</dd>
				</dl>
			</el-col>
			<el-col :span="12">
				<dl>
					<dt>操作用户：</dt>
					<dd>{{ data.createAccount }} / {{ data.ipAddr }}</dd>
				</dl>
			</el-col>
			<el-col :span="12">
				<dl>
					<dt>请求方式：</dt>
					<dd>
						<el-tag size="small" :type="data.requestType | requestTypeFilter">{{ data.requestType }}</el-tag>
					</dd>
				</dl>
			</el-col>
			<el-col :span="24">
				<dl>
					<dt>操作方法：</dt>
					<dd>{{ data.classPath }}</dd>
				</dl>
			</el-col>
			<el-col :span="24">
				<dl>
					<dt>请求参数：</dt>
					<dd>{{ data.requestParam }}</dd>
				</dl>
			</el-col>
			<el-col :span="12">
				<dl>
					<dt>操作状态：</dt>
					<dd>
						<el-tag size="small" :type="data.level | operateTypeFilter">{{ data.level | operateNameFilter }}</el-tag>
					</dd>
				</dl>
			</el-col>
			<el-col :span="12">
				<dl>
					<dt>操作时间：</dt>
					<dd>{{ data.startTime }}</dd>
				</dl>
			</el-col>
		</el-row>
		<template slot="footer">
			<el-button size="medium">关闭</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { getLogEnumList, getLogPageList } from '@/api/system/tbSysLog';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} }
	},
	data() {
		return {
			visible: this.value
		};
	},
	filters: {
		requestTypeFilter(input) {
			return input === 'POST' ? 'success' : '';
		},
		operateTypeFilter(input) {
			if (input === '1') {
				return 'success';
			} else if (input === '2') {
				return 'danger';
			} else {
				return 'info';
			}
		},
		operateNameFilter(input) {
			if (input === '1') {
				return '成功';
			} else if (input === '2') {
				return '错误';
			} else {
				return '其他';
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	}
};
</script>

<style lang="scss" scoped>
.system_log_detail {
	flex: 1;
	overflow: hidden;
	dl {
		display: flex;
		align-items: flex-start;
		padding: 12px;
		line-height: 24px;
	}
	dt {
		flex-shrink: 0;
		overflow: hidden;
	}
}
</style>
